<template>
    <div>
        <el-row>
            <el-col :span="6"><el-input v-model="carId" size="mini" placeholder="请输入车辆编号"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="维修记录编号"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="carId"
                        label="维修车辆编号">
                </el-table-column>
                <el-table-column
                        prop="carname"
                        label="维修车辆名称">
                </el-table-column>
                <el-table-column
                        prop="maintainShopName"
                        label="维修厂名称">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="金额">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData:[],
            currentPage:1,//当前页面，默认1
            pageSize:5,//每页显示条数
            total:100,//分页总数量，默认值随便写，初始化时赋予新值
            carId:''
        };
    },
    created:function() {
         //初始化
        this.loadData();
    },
    methods:{
        //加载数据
        loadData(){
            //动态菜单请求
            this.$http.post("/api/cars/maintainRecord/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                carname:this.carname
                }).then((response) => {
                    if(response.data.code==2000){
                        console.log(response);
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                    };
            });
                    
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize=val;
            this.loadData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=val;
            this.loadData();
        },
        search(){
            this.loadData();
        },
    }
}
</script>
